<template>
  <div class="home">
    <!-- search -->
    <Search />
    <div class="main">
      <!-- swiper -->
      <div class="swiper">
        <mt-swipe :auto="4000">
          <mt-swipe-item>
            <img src="../assets/home/swiper-1.jpg" alt />
          </mt-swipe-item>
          <mt-swipe-item>
            <img src="../assets/home/swiper-2.jpg" alt />
          </mt-swipe-item>
          <mt-swipe-item>
            <img src="../assets/home/swiper-3.jpg" alt />
          </mt-swipe-item>
          <mt-swipe-item>
            <img src="../assets/home/swiper-4.jpg" alt />
          </mt-swipe-item>
        </mt-swipe>
      </div>
      <!-- slide -->
      <div class="slide">
        <div>
          <img src="../assets/home/slide-1.jpg" alt />
          <span>桌子</span>
        </div>
        <div>
          <img src="../assets/home/slide-2.jpg" alt />
          <span>灯饰</span>
        </div>
        <div>
          <img src="../assets/home/slide-3.png" alt />
          <span>窗帘</span>
        </div>
        <div>
          <img src="../assets/home/slide-4.gif" alt />
          <span class="more">more</span>
        </div>
      </div>
      <!-- 秒杀 -->
      <h2>限时秒杀</h2>
      <div class="seckill">
        <span class="iconfont icon-xianshiqianggou clock"></span>
        <span class="count">59:99:99</span>
        <div>
          <span>18:00</span>
          <span>20:00</span>
          <span>22:00</span>
          <span>24:00</span>
        </div>
      </div>
      <ul class="countDown">
        <li>
          <img src="../assets/home/swiper-1.jpg" alt />
          <div>
            <span>精品沙发</span>
            <span>￥299</span>
          </div>
        </li>
        <li>
          <img src="../assets/home/swiper-2.jpg" alt />
          <div>
            <span>精品沙发</span>
            <span>￥299</span>
          </div>
        </li>
        <li>
          <img src="../assets/home/swiper-3.jpg" alt />
          <div>
            <span>精品沙发</span>
            <span>￥299</span>
          </div>
        </li>
        <li>
          <img src="../assets/home/swiper-4.jpg" alt />
          <div>
            <span>精品沙发</span>
            <span>￥299</span>
          </div>
        </li>
      </ul>
      <!-- 上新 -->
      <h2>最近上新</h2>
      <ul class="new">
        <li>
          <img src="../assets/home/swiper-1.jpg" alt />
          <div>
            <span>欧洲风餐桌</span>
            <span>￥899</span>
          </div>
        </li>
        <li>
          <img src="../assets/home/swiper-1.jpg" alt />
          <div>
            <span>欧洲风餐桌</span>
            <span>￥899</span>
          </div>
        </li>
        <li>
          <img src="../assets/home/swiper-1.jpg" alt />
          <div>
            <span>欧洲风餐桌</span>
            <span>￥899</span>
          </div>
        </li>
        <li>
          <img src="../assets/home/swiper-1.jpg" alt />
          <div>
            <span>欧洲风餐桌</span>
            <span>￥899</span>
          </div>
        </li>
      </ul>
      <!-- 热门商品 -->
      <h2>热门商品</h2>
      <ul class="hot">
        <li>
          <img src="../assets/home/swiper-1.jpg" alt />
          <div>
            <span>欧洲风餐桌</span>
            <span>￥899</span>
          </div>
        </li>
        <li>
          <img src="../assets/home/swiper-1.jpg" alt />
          <div>
            <span>欧洲风餐桌</span>
            <span>￥899</span>
          </div>
        </li>
        <li>
          <img src="../assets/home/swiper-1.jpg" alt />
          <div>
            <span>欧洲风餐桌</span>
            <span>￥899</span>
          </div>
        </li>
        <li>
          <img src="../assets/home/swiper-1.jpg" alt />
          <div>
            <span>欧洲风餐桌</span>
            <span>￥899</span>
          </div>
        </li>
      </ul>
      <h2>精品推荐</h2>
      <ul
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10"
        class="find"
      >
        <li v-for="(item,index) in aaa" :key="index">{{item}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import Search from "../components/Search";
export default {
  name: "Home",
  components: { Search },
  data() {
    return {
      list: [
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        10,
        11,
        12,
        13,
        14,
        15,
        16,
        17,
        18,
        19,
        20,
        21,
        22
      ],
      aaa: [1, 2, 3, 4, 5, 6]
    };
  },
  methods: {
    loadMore() {
      this.loading = true;
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          if (this.list[this.aaa.length]) {
            this.aaa.push(this.list[this.aaa.length]);
          }
        }
        this.loading = false;
      }, 1500);
    }
  }
};
</script>
<style lang="less">
.main {
  margin-top: 0.4rem;
  .swiper {
    width: 9.333333rem;
    height: 2.666667rem;
    margin: 0 auto;
    background-size: cover;
    img {
      width: 9.333333rem;
      height: 2.666667rem;
    }
  }
  .slide {
    border-top: 1px solid #f5f5f5;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 0.266667rem;
    width: 100%;
    height: 1.8rem;
    div {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 1.066667rem;
      height: 1.066667rem;
      img {
        width: 0.933333rem;
        height: 0.533333rem;
      }
      span {
        margin-top: 0.133333rem;
      }
    }
  }
  h2 {
    margin-top: 0.213333rem;
    background: #eeeeee;
    display: inline-block;
    width: 9.333333rem;
    height: 0.8rem;
    line-height: 0.8rem;
  }
  .seckill {
    width: 9.333333rem;
    margin: 0 auto;
    margin-top: 0.213333rem;
    display: flex;
    span {
      font-size: 0.426667rem;
      line-height: 0.426667rem;
    }
    .clock {
      font-size: 0.533333rem;
    }
    .count {
      padding-left: 0.266667rem;
    }
    div {
      span {
        padding: 0.266667rem;
      }
    }
  }
  .countDown {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 9.333333rem;
    margin: 0 auto;
    margin-top: 0.213333rem;
    li {
      display: flex;
      flex-wrap: wrap;
      width: 4.5rem;
      height: 3.466667rem;
      img {
        width: 4.5rem;
        height: 2.666667rem;
        background-size: cover;
      }
    }
  }
  .new {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 9.333333rem;
    margin: 0 auto;
    margin-top: 0.213333rem;
    li {
      display: flex;
      flex-wrap: wrap;
      width: 4.5rem;
      height: 3.466667rem;
      img {
        width: 4.5rem;
        height: 2.666667rem;
        background-size: cover;
      }
    }
  }
  .hot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 9.333333rem;
    margin: 0 auto;
    margin-top: 0.213333rem;
    li {
      display: flex;
      flex-wrap: wrap;
      width: 4.5rem;
      height: 3.466667rem;
      img {
        width: 4.5rem;
        height: 2.666667rem;
        background-size: cover;
      }
    }
  }
  .find {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    li {
      width: 4rem;
      height: 1.333333rem;
      background: pink;
      margin: 0 auto;
      margin-top: 0.266667rem;
    }
  }
  .mint-swipe-indicator {
    background: #ef4f4f;
    opacity: 1;
  }
}
</style>
